<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
<link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css"  media="all">
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<link rel="stylesheet" href="${bathPath}/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="${bathPath}/layui_ext/dtree/font/dtreefont.css">
</head>
<style type="text/css"> 
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);    
}

.layui-form-block{min-height:25px;}
#label{width:90px;}
#block{width:130px;min-height:25px;}
</style>
<body>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="height:490px;width:910px;margin-left:20px;">
  <ul class="layui-tab-title">
    <li lay-id="22">刷卡记录查询</li>
  </ul>
  <div class="layui-tab-content" style="height:450px; width:910px">
    <div class="layui-tab-item layui-show" >
<form class="layui-form layui-form-pane"  id="myform" method="post" action="" showOnMouseOver="false">
	<input type="hidden" id="autoId" name="autoId" value="${deptBean.autoId}">
	<table class="param_table" >
		<tr>
			<td class="layui-form-label" id="label">事件类型</td>
			<td class="layui-form-block" id="block"><select type="text" id="" name="" lay-verify="required"  autocomplete="off" class="layui-input"><option>哈哈</option></select></></td>
			<td class="layui-form-label" id="label">开始时间</td>
			<td class="layui-form-block" id="block">
                 <input type="text" name="starttime" id="starttime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
			</td>
			<td class="layui-form-label" id="label">截止时间</td>
			<td class="layui-form-block" id="block">
			     <input type="text" name="endtime" id="endtime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
			</td>
			<td class="layui-form-label">门点</td>
			<td class="layui-form-block"><select type="text" id="" name="" lay-verify="required"  autocomplete="off" class="layui-input"><option>哈哈</option></select></></td>
		</tr>
		<tr>
			<td class="layui-form-label" id="label">部门</td>
			<td class="layui-form-block" id="block"><select type="text" id="" name="" lay-verify="required"  autocomplete="off" class="layui-input"><option>哈哈</option></select></></td>
			<td class="layui-form-label" id="label">用户编号</td>
			<td class="layui-form-block" id="block"><input type="text" id="" name="" value="" lay-verify="required" autocomplete="off" class="layui-input"></td>
			<td class="layui-form-label" id="label">用户名称</td>
			<td class="layui-form-block" id="block"><input type="text" id="" name="" value="" lay-verify="required" autocomplete="off" class="layui-input"></td>
			<td colspan="4" style="width:500px;" class="layui-form-block">
				<input type="checkbox"  name="" lay-skin="primary" title="自动" lay-filter="Osi">
				<input class="layui-btn site-demo-active layui-btn-xs"  type="button" onclick="" value="查询"  class="primary"/>
				<input class="layui-btn site-demo-active layui-btn-xs"  type="button" onclick="" value="导出"  class="primary"/>
				<input class="layui-btn site-demo-active layui-btn-xs"  type="button" onclick="" value="删除全部"  class="primary"/>
			</td>
		</tr>
	</table>
	</form>


<!-- 页面 -->
<div>
<iframe id="myIframe" name="mainIframe" frameborder="0" style="width:500px;min-width:600px;height:400px;position:absolute; top:100px; left:260px;"  src="" ></iframe>
</div>
</div>
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<script>
		layui.use('element', function() {
				var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

				//触发事件
				var active = {
					tabAdd : function() {
						//console.log(url);
						//新增一个Tab项
						element.tabAdd('demo', {
							title : $(this).attr("data-title"), //用于演示
							
							content : '<iframe data-frameid="'+$(this).attr("data-id")+'" scrolling="auto" frameborder="0" src="'+$(this).attr("data-url")+'" style="width:1220px;height:650px;"></iframe>' ,
							id : $(this).attr("data-id")
						//实际使用一般是规定好的id，这里以时间戳模拟下
						})
						var id = $(this).attr("data-id");
						
						element.tabChange('demo', id); //切换到：用户管理
		                $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
					   
					},
					tabDelete : function(othis) {
						//删除指定Tab项
						element.tabDelete('demo', '44'); //删除：“商品管理”

						othis.addClass('layui-btn-disabled');
					},
					tabChange : function() {
						//切换到指定Tab项
						element.tabChange('demo', '22'); //切换到：用户管理
					}
				};

				$('.site-demo-active').on('click', function() {
					var othis = $(this), type = othis.data('type');
					active[type] ? active[type].call(this, othis) : '';
				});

				//Hash地址的定位
				var layid = location.hash.replace(/^#test=/, '');
				element.tabChange('test', layid);

				element.on('tab(test)', function(elem) {
					location.hash = 'test=' + $(this).attr('lay-id');
				});

			});
		
	    layui.use(['form', 'layedit', 'laydate'], function(){
	        var form = layui.form
	                ,layer = layui.layer
	                ,layedit = layui.layedit
	                ,laydate = layui.laydate;

	        //日期
	        laydate.render({
	            elem: '#starttime'
	           ,type: 'datetime'
	  	       //,range: true //或 range: '~' 来自定义分割字符
	        });
	        laydate.render({
	            elem: '#endtime'
	           ,type: 'datetime'
	        });
	        
	    
	    });
	</script>
	</div>
	</div>
</body>
</html>